<template>
	<view class="content paddingtb">
		<!-- 模板名称 -->
		<view class="padding ffffff border_2">
			<view class="flexbetween">
				<view class="color_ling text_x white_nowrap">模版名称</view>
				<view class="flexleft">
					<input class="text_g textright" type="text" placeholder="例如“部分地区包邮”，“全国包邮”"
						placeholder-style="color: #999999;font-size: 30rpx;" v-model="name">
				</view>
			</view>
		</view>
		<!-- 是否包邮 -->
		<view class="padding ffffff border_2 margin_top">
			<view class="color_ling text_x white_nowrap">是否包邮</view>
			<view class="flexleft margin_top">
				<view :class="is_delivery==0?'select margin_right3':'noSelect margin_right3'" @click="is_delivery=0">
					自定义运费
				</view>
				<view :class="is_delivery==1?'select margin_right3':'noSelect margin_right3'" @click="is_delivery=1">
					卖家包邮</view>
			</view>
		</view>
		<!-- 计价方式 -->
		<view class="padding ffffff border_2 margin_top" v-show="is_delivery==0">
			<view class="color_ling text_x white_nowrap">计价方式</view>
			<view class="flexleft margin_top">
				<view :class="valuation==1?'select margin_right3':'noSelect margin_right3'" @click="valuation=1">
					按件数
				</view>
				<view :class="valuation==2?'select margin_right3':'noSelect margin_right3'" @click="valuation=2">
					按重量
				</view>
				<view :class="valuation==3?'select margin_right3':'noSelect margin_right3'" @click="valuation=3">
					按体积
				</view>
			</view>
		</view>
		<!-- 运费数据 -->
		<view class="padding border_2 ffffff margin_top" v-show="is_delivery==0">
			<view class="flexbetween">
				<view class="color_ling text_x white_nowrap">运费数据</view>
				<image class="redImg" src="../static/image/shop/red_jia.png" mode="" @click="addMsg"></image>
			</view>
			<view class="margin_top freightBox padding" v-for="(item,index) in rules" :key="index">
				<view class="flexbetween" @click="goRegionSelect(index)">
					<view class="text_x color_ling white_nowrap">选择可配送区域</view>
					<view>
						<u-icon name="arrow-right" color="rgba(175, 175, 175, 1)" size="12"></u-icon>
					</view>
				</view>
				<view class="margin_top color_six text_a">
					<text v-for="(ite,val) in item.citysArr" :key="ite.value">{{ite.text}}
						<text v-show="item.citysArr.length-1!=val">,</text>
					</text>
				</view>
				<view class="margin_top4">
					<view class="flexbetween flex_wrap">
						<view class="freightItem flexleft">
							<text class="text_a color_jiu" v-show="valuation==1">首件(个):</text>
							<text class="text_a color_jiu" v-show="valuation==2">首重(kg):</text>
							<text class="text_a color_jiu" v-show="valuation==3">首体积(m³):</text>
							<input type="number" class="text_a color_red" style="max-width:100rpx;"
								v-model="item.first">
						</view>
						<view class="freightItem flexleft">
							<text class="text_a color_jiu">运费(元):</text>
							<input type="number" class="text_a color_red" style="max-width:150rpx;"
								v-model="item.first_fee">
						</view>
						<view class="freightItem flexleft margin_top">
							<text class="text_a color_jiu" v-show="valuation==1">续件(个):</text>
							<text class="text_a color_jiu" v-show="valuation==2">续重(kg):</text>
							<text class="text_a color_jiu" v-show="valuation==3">续体积(m³):</text>
							<input type="number" class="text_a color_red" style="max-width:100rpx;"
								v-model="item.additional">
						</view>
						<view class="freightItem flexleft margin_top">
							<text class="text_a color_jiu">续费(元):</text>
							<input type="number" class="text_a color_red" style="max-width:150rpx;"
								v-model="item.additional_fee">
						</view>
					</view>
				</view>
				<view class="flexright margin_top" @click="del(index)">
					<image class="imgDelete margin_right1" src="/static/image/mine/delete.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="footer padding ffffff">
			<view class="footerButton" @click="submit">保存</view>
		</view>
		<!-- 多选选择地址 -->
		<tki-tree ref="tkitree" :range="listData" :multiple="true" title="选择城市" :foldAll="true" :selectParent="true"
			confirmColor="#f3271c" @confirm="treeConfirm" @cancel="treeCancel" />
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import citys from "@/static/city/city.js"
	export default {
		data() {
			return {
				is_delivery: 0, // 0自定义运费 1卖家包邮
				valuation: 1, // 计价方式:1=按件数,2=按重量,3=按体积
				listData: [],
				rules: [{
					first: "",
					first_fee: "",
					additional: "",
					additional_fee: "",
					citysArr: []
				}],
				currentIndex: 0,
				listid: "",
				name: "",
				name: "",
			}
		},
		onLoad(options) {
			this.listid = options.id
			if (this.listid) {
				this.init()
			}
			let arr = JSON.parse(JSON.stringify(citys.data))
			arr.forEach(item => {
				item.children.forEach(ite => {
					ite.children = []
				})
			})
			this.listData = arr
			// console.log(this.listData,"5555555555555555555555")
		},
		watch: {
			rules: {
				deep: true,
				handler(newval) {
					if (newval.length == 0) {
						this.addMsg()
					}
				}
			},
			"listDate": {
				handler(newVal) {
					// console.log(newVal,"listDate999999999999")
				},
				deep: true
			}
		},
		methods: {
			init() {
				httpRequest.request('/api/shop.logistics/getform', 'GET', {
					id: this.listid
				}).then(res => {
					let info = res.data.info
					this.name = info.name
					this.is_delivery = info.is_delivery
					this.valuation = info.valuation
					info.rules.forEach(item => {
						this.$set(item, "arr1", item.citys.split(","))
						this.$set(item, "arr2", item.province.split(","))
						this.$set(item, "citysArr", [])
						item.arr1.forEach((ite, ind) => {
							item.citysArr.push({
								ptext: item.arr2[ind],
								text: item.arr1[ind]
							})
						})
						delete item.arr1
						delete item.arr2
						delete item.province
					})
					this.rules = info.rules
					// console.log(info.rules, "jinglei")
				})
			},
			submit() {
				let _this = this
				if (_this.name == '') {
					httpRequest.toast('请输入运费模板名称');
					return false;
				}
				uni.showLoading({
					title: '请稍候...',
					mask: true
				})
				let arr = JSON.parse(JSON.stringify(this.rules))
				let rules = []
				arr.forEach(item => {

					let province = []
					let citys = []
					item.citysArr.forEach(ite => {
						province.push(ite.ptext)
						citys.push(ite.text)
					})
					rules.push({
						first: item.first,
						first_fee: item.first_fee,
						additional: item.additional,
						additional_fee: item.additional_fee,
						province: province.join(),
						citys: citys.join()
					})
				})
				let data = {
					id: this.listid,
					name: this.name,
					is_delivery: this.is_delivery,
					valuation: this.valuation,
					rules
				}
				if (!this.listid) {
					delete data.id
				}
				httpRequest.request('/api/shop.logistics/save', 'POST', data).then(res => {
					uni.hideLoading()
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack(1)
						}, 1000)
					}
				})
			},
			addMsg() {
				this.rules.push({
					first: "",
					first_fee: "",
					additional: "",
					additional_fee: "",
					citysArr: []
				})
			},
			del(index) {
				this.rules.splice(index, 1)
			},
			goRegionSelect(index) { //地区选择
				this.currentIndex = index
				//打开选择器
				this.$refs.tkitree._show();
				// uni.navigateTo({
				// 	url: "./regionSelection"
				// })
			},
			treeCancel(e) {
				//关闭选择器
				this.$refs.tkitree._hide();
			},
			treeConfirm(e) {
				// console.log(e);
				this.rules[this.currentIndex].citysArr = e
				this.listData.forEach((item,index)=>{
					item.children.forEach((ite,i)=>{
						if(ite.value==e[0].value){
							if(item.children.length==1){
								this.listData.splice(index,1)
							}else{
								item.children.splice(i,1)
							}
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding-bottom: 110rpx;
	}

	.color_red {
		color: rgba(243, 39, 28, 1);
	}

	.noSelect {
		padding: 10rpx 30rpx;
		text-align: center;
		background: #EFEFEF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.select {
		padding: 10rpx 30rpx;
		text-align: center;
		background: rgba(243, 39, 28, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.redImg {
		width: 32rpx;
		height: 32rpx;
	}

	.freightBox {
		background: #F7F7F7;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.freightItem {
		width: 294rpx;
		box-sizing: border-box;
		padding: 30rpx 15rpx;
		text-align: center;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.imgDelete {
		width: 23.33rpx;
		height: 24.27rpx;
		display: block;
	}
</style>